<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>自动发货商品库存管理</title>
		
		<link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="../../css/font-awesome.css?v=4.4.0" rel="stylesheet">
		<link href="../../css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
		<link href="../../css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
		
		<link href="../../css/animate.css" rel="stylesheet">
		<link href="../../css/style.css?v=4.1.0" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../../css/jiege.css"/>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/plugins/sweetalert/sweetalert.min.js"></script>
		<script src="../../js/plugins/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		
	</head>

	<body class="gray-bg">
		<div id="app" class="wrapper wrapper-content animated fadeInRight">
			<div class="row">

				<div class="col-sm-12" v-show="page==1">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5><span @click="back"><i class="glyphicon glyphicon-menu-left"></i>返回&nbsp;|&nbsp;商品库存(<font color="red">{{id}}</font>)</h5>
							<div class="ibox-tools">
								<a @click="page=2" class="collapse-link">
									<i class="fa fa-plus-circle"></i>添加
								</a>
							</div> 
						</div>
						<div class="ibox-content">

							<div class="row" style="margin-bottom: 5px;">
								<div class="col-lg-4">
									<div class="input-group">
										

										<input v-model="keyword" type="text" class="form-control" :placeholder="place">
										
										<span class="input-group-btn" :class="{'open':open_1}">
											
                                            <button @click="openselect(1)" type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{search}}<span class="caret"></span></button>
											<ul class="dropdown-menu">
												<li v-for="item in searchList">
													<a @click="setsearch(item)">{{item}}</a>
												</li>
											</ul>
											
											
											<button @click="getpage" class="btn btn-primary" type="button">搜索</button>
										</span>
									</div>
								</div>
							</div>

							<div class="table-responsive">

								<table class="table table-striped">
									<thead>
										<tr>
											<th @click="changeOrderby2" :class="{'dropup':(orderby=='id升序'),'textred':(orderby=='id升序' || orderby=='id降序')}">ID<span class="caret"></span></th>
											<th>库存</th>
											<th>添加时间</th>
											<th>状态</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="item in items">
											<th>{{ item.id }}</th>
											<th @click="tc(item.km)">{{ item.km | addtext }}</th>
											<th>{{ item.addtime }}</th>
											<th>{{ item.zt }}</th>
											<th>
												<span @click="del(item.id)" class="badge badge-warning"><span class="fa fa-trash-o"></span>&nbsp;&nbsp;删除</span>
											</th>
										</tr>
										<tr v-show="items.length==0">
											<th @click="refresh">暂时没有数据哦~</th>
											<th></th>
											<th></th>
											<th></th>
											<th></th>
										</tr>
									</tbody>
								</table>
							</div>

							<p>
								<div>
									共 {{havenum}} 条数据,每页
									<span class="btn-group dropup" :class="{'open':open_2}">
										<button @click="openselect(2)" class="btn btn-white btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								    		{{pagenum}}<span class="caret"></span>
										</button>
										<ul class="dropdown-menu">
											<li>
												<a @click="dopagenum(10)">10</a>
											</li>
											<li>
												<a @click="dopagenum(30)">30</a>
											</li>
											<li>
												<a @click="dopagenum(50)">50</a>
											</li>
											<li>
												<a @click="dopagenum(100)">100</a>
											</li>
										</ul>
									</span>
									<span>条</span>
								</div>

								<div v-html="pagetext">

								</div>

							</p>
						</div>
					</div>
				</div>
				
				
				
				<div class="col-sm-12" v-show="page==2">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>
								<span @click="page=1"><i class="glyphicon glyphicon-menu-left"></i>返回&nbsp;</span>|&nbsp;添加商品库存
							</h5>
						</div>
						<div class="ibox-content">
			
							<div class="form-horizontal">
								
								<div class="form-group">
									<label class="col-sm-2 control-label">库存(一行一件)</label>
									<div class="col-sm-10">
	                                    <textarea v-model="km" class="form-control" style="height: 200px;" required="" aria-required="true"></textarea>
	                                </div>
								</div>
								
								<div class="form-group">
									<div class="col-sm-4 col-sm-offset-2">
										<button @click="add" class="btn btn-primary" type="submit">添加</button>
										<button @click="km=''" class="btn btn-white" type="submit">清空</button>
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				
				
				
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		<script type="text/javascript">
			var $_GET = (function(){ var url = window.document.location.href.toString(); var u = url.split("?"); if(typeof(u[1]) == "string"){ u = u[1].split("&"); var get = {}; for(var i in u){ var j = u[i].split("="); get[j[0]] = j[1]; } return get; } else { return {}; } })();
			var id = $_GET['id'];
			
			var vm = new Vue({
				el: "#app",
				data: {
					id:id,
					page:1,
					place: '卡密内容',
					pagetext: '',
					items: [],

					search: '库存',
					keyword: '',
					nowpage: '1',
					pagenum: '30',
					orderby: '',

					maxpage: '',
					havenum: '',

					searchList: ['库存','时间','订单号',"状态"],
					
					open_1:false,
					open_2:false,
					
					
					km:'',
					
				},
				watch: {
					search(val) {
						if(val == "库存") {
							this.place = "卡密内容";
						} else if(val == "订单号"){
							this.place = "下单的订单号码";
						} else if(val == "状态"){
							this.place = "未售、已售";
						}else{
							this.place = "时间描述";
						}
					}
				},
				filters: {
					addtext(val){
						val = val+'';
						if(val.length>10){
							val = val.substring(0,10)+'...';
						}
						return val;
					}
				},
				methods: {
					tc(text){
						text = text.replace(/\</g,"&lt;");
						text = text.replace(/\>/g,"&gt;");
						layer.alert(text,{
							title:'详情：' 
						})
					},
					dopage(now, max) {
						now = Number(now);
						if(now < 1 || !now || now == '') {
							now = 1;
						}
						let a = [];
						let b = [];
						for(let i = 0; i < 5; i++) {
							a[i] = now - 2 + i;
							if(a[i] >= 1 && a[i] <= max) {
								b.push(a[i]);
							}
						}
						let l = now - 1;
						let r = now + 1;

						if(now == 1) {
							var page = '<ul class="pagination"><li class="disabled"><a>首页</a></li><li class="disabled"><a>&laquo;</a></li>';
						} else {
							var page = '<ul class="pagination"><li><a  onclick="vm.getpage(1)">首页</a></li><li><a onclick="vm.getpage(' + l + ')">&laquo;</a></li>';
						}

						for(i = 0; i < b.length; i++) {
							if(b[i] == now) {
								page = page + '<li><a onclick="vm.getpage(' + b[i] + ')"><font color="red">' + b[i] + '</font></a></li>';
							} else {
								page = page + '<li><a onclick="vm.getpage(' + b[i] + ')">' + b[i] + '</a></li>';
							}
						}

						if(now == max) {
							page = page + '<li  class="disabled"><a>&raquo;</a></li><li class="disabled"><a>尾页</a></li></ul>';
						} else {
							page = page + '<li><a onclick="vm.getpage(' + r + ')">&raquo;</a></li><li><a onclick="vm.getpage(' + max + ')">尾页</a></li></ul>';
						} 

						this.pagetext = page;
					},
					back(){
						location.href='goods.html';
					},
					getpage(id) { // id -> 需要跳转的页数，默认不填为1
						if(!id) {
							if(this.nowpage < 0 || this.nowpage == '') {
								this.nowpage = 1;
							}
						} else {
							this.nowpage = id;
						}
						this.$http.post("../../km.json", {
							search: this.search,
							keyword: this.keyword,
							nowpage: this.nowpage,
							pagenum: this.pagenum,
							orderby: this.orderby,
							id:this.id,
						}).then(function(res) {
							if(res.data.code == "1") { //获取列表成功，更新变量
								this.items = res.data.data,
									this.search = res.data.modle.search,
									this.keyword = res.data.modle.keyword,
									this.nowpage = res.data.modle.nowpage,
									this.pagenum = res.data.modle.pagenum,
									this.orderby = res.data.modle.orderby,
									this.maxpage = res.data.modle.maxpage,
									this.havenum = res.data.modle.havenum
								this.dopage(this.nowpage, this.maxpage);
							} else if(res.data.code == '-1') {
								window.parent.frames.location.href = "../../html/login.html"
							} else {
								layer.alert('获取数据失败！请刷新页面重试', {
									icon: 2
								});
							}
						}, function() {
							layer.alert('服务器链接失败！请检查您的网络设置', {
								icon: 2
							});
						})

					},
					dopagenum(num) {
						this.pagenum = num;
						this.getpage();
						this.open_2=false;
					},
					changeOrderby() {
						if(this.orderby == "金额降序" || this.orderby == '') {
							this.orderby = "金额升序";
						} else {
							this.orderby = "金额降序";
						}
						this.getpage();
					},
					changeOrderby2() {
						if(this.orderby == "id降序" || this.orderby == '') {
							this.orderby = "id升序";
						} else {
							this.orderby = "id降序";
						}
						this.getpage();
					},
					setsearch(val) {
						this.search = val;
						this.open_1=false;
					},
					refresh(){
						location.href=location.href;
					},
					del(id) {
						let that = this;
						swal({
							title: "",
							text: "是否删除记录(id=" + id + ")，删除之后无法恢复，请谨慎操作",
							type: "warning",
							showCancelButton: true,
							confirmButtonColor: "#DD6B55",
							confirmButtonText: "删除",
							closeOnConfirm: false
						}, function() {
							// ajax删除记录
							that.$http.post("../../km.json", {
								type: 'del',
								kmid: id,
								id:that.id,
							}).then(function(res) {
								if(res.data.code == 1) {
									setTimeout(function() {
										that.getpage();
									}, 100);
									swal("删除成功！", "您已经永久删除了这条记录。", "success");
								} else {
									swal("删除失败", res.data.message, "error");
								}
							}, function() {
								swal("删除失败", "服务器链接失败！", "error");
							})
						});
					},
					openselect(id){
						if(id==1){
							if(this.open_1==true){
								this.open_1=false;
							}else{
								this.open_1=true;
							}
						}else if(id==2){
							if(this.open_2==true){
								this.open_2=false;
							}else{
								this.open_2=true;
							}
						}
					},
					getinfo(id){
						var that = this;
						this.$http.post('../../pay.list',{
							type:'getinfo',
							id:id
						}).then(function(res){
							that.orderinfo = res.data.info;
						},function(){
							
						})
					},
					add(){
						var that = this;
						that.$http.post("../../km.json", {
							type: 'add',
							km: that.km,
							id:that.id,
						}).then(function(res) {
							if(res.data.code == 1) {
								setTimeout(function() {
									that.getpage();
									that.page="1";
									that.km='';
								}, 100);
								swal("添加成功！", res.data.message,"success");
							} else {
								swal("添加失败", res.data.message, "error");
							}
						}, function() {
							swal("添加失败", "服务器链接失败！", "error");
						})
					}
				},
				mounted: function(){
					
					
					this.getpage();
				}

			})
		</script>
	</body>

</html>